import React, { useState, memo, useEffect } from 'react';
import { Table, Row, Avatar } from 'tdesign-react';
import { useAppDispatch, useAppSelector } from 'modules/store';
import SearchForm from './components/SearchForm';

import './index.module.less';
import classnames from 'classnames';
import CommonStyle from '../../../styles/common.module.less';
import { OSS_PREFIX } from '../../../configs/oss';
import { clearPageState, getList, selectCourseListSelect } from 'modules/course_selection';

export const SelectTable = () => {
  const dispatch = useAppDispatch();
  const pageState = useAppSelector(selectCourseListSelect);
  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([0, 1]);
  const { loading, contractList, current, size, total } = pageState;
  useEffect(() => {
    dispatch(
      getList({
        size: pageState.size,
        current: pageState.current,
      }),
    );
    return () => {
      dispatch(clearPageState());
    };
  }, []);

  function onSelectChange(value: (string | number)[]) {
    setSelectedRowKeys(value);
  }

  return (
    <>
      <Row justify='start' style={{ marginBottom: '20px' }}>
        <SearchForm
          onSubmit={async (value) => {
            console.log(value);
          }}
          onCancel={() => {}}
        />
      </Row>
      <Table
        loading={loading}
        data={contractList}
        columns={[
          {
            title: '用户',
            fixed: 'left',
            align: 'left',
            ellipsis: true,
            width: 100,
            colKey: 'username',
          },
          {
            title: '用户头像',
            fixed: 'left',
            align: 'left',
            ellipsis: true,
            width: 100,
            colKey: 'avatar',
            cell(record) {
              return record.row.avatar === null || record.row.avatar === '' ? (
                <>
                  <Avatar>{record.row.username.charAt(0)}</Avatar>
                </>
              ) : (
                <>
                  <Avatar image={`${OSS_PREFIX}${record.row.avatar}`}></Avatar>
                </>
              );
            },
          },
          {
            title: '课程名称',

            align: 'left',
            ellipsis: true,
            width: 100,
            colKey: 'name',
          },
          {
            title: '课程图片',
            align: 'center',
            ellipsis: true,
            width: 200,
            colKey: 'picture',
            cell(record) {
              return record.row.picture === null || record.row.picture === '' ? (
                <>
                  <Avatar size='100px' shape='round'>
                    {'无商品图片'}
                  </Avatar>
                </>
              ) : (
                <>
                  <Avatar size='100px' shape='round' image={`${OSS_PREFIX}${record.row.picture}`}></Avatar>
                </>
              );
            },
          },
          {
            title: '课程编号',
            width: 200,
            ellipsis: true,
            colKey: 'courseId',
            align: 'center',
          },
          {
            title: '选课时间',
            width: 140,
            ellipsis: true,
            colKey: 'chooseTime',
            align: 'center',
          },
          {
            title: '开课时间',
            width: 150,
            ellipsis: true,
            colKey: 'startTime',
          },
          {
            title: '上课时间',
            width: 140,
            ellipsis: true,
            colKey: 'courseTime',
          },
          {
            title: '教练',
            width: 140,
            ellipsis: true,
            colKey: 'teacherName',
          },
        ]}
        rowKey='index'
        selectedRowKeys={selectedRowKeys}
        hover
        onSelectChange={onSelectChange}
        pagination={{
          pageSize: size,
          total,
          current,
          showJumper: true,
          onCurrentChange(current, pageInfo) {
            dispatch(
              getList({
                size: pageInfo.pageSize,
                current: pageInfo.current,
              }),
            );
          },
          onPageSizeChange(size) {
            dispatch(
              getList({
                size,
                current: 1,
              }),
            );
          },
        }}
      />
    </>
  );
};

const selectPage: React.FC = () => (
  <div className={classnames(CommonStyle.pageWithPadding, CommonStyle.pageWithColor)}>
    <SelectTable />
  </div>
);

export default memo(selectPage);
